<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	<style>
	    .div1{
	    	width: 500px;
	    	outline: 10px ridge #abcdef;
	    	margin: 0 auto;
	    	/*height: 500px;*/
	    	background: #ccc;
	    }
		#div3{
			display: inline-block;
			width: 315px;
			margin: 10px 0;
		}
		.div4{
			width: 200px;
			margin: 10px;
			background: #fff;
			border: 1px solid #abcdef;
			font-size: 16px;
		}
		.div5{
			width: 300px;
			margin: 10px;
			background: #fff;
			border: 1px solid #abcdef;
			display: inline-block;
			font-size: 16px;

		}
		.a{
			font-size: 16px;
		}
		.h1{
			background: pink;
		}
	</style>
</head>
<body>
<div class="div1">
	标题:<input type="text" id="div3" ><br/>
	内容:<textarea name="texterea" id="txt" cols="50" rows="10" ></textarea>
	<div class="div2">提交</div>
	<h1 class="h1">显示留言</h1>
</div>
</body>
<script>
	// 获取元素
	var box = document.querySelector('.div1');
	var btn = document.querySelector('.div2');
	var oInput = document.querySelector('#div3');
	var text = document.querySelector('#txt');
	var h1 = document.querySelector('.h1');
	// 封装函数
	function ran (){
		// 新建元素
		var newDivone = document.createElement('div');
		var newDivtwo = document.createElement('div');
		var del = document.createElement('a');
		// 给新建元素插入内容
		newDivone.innerHTML = oInput.value;
		newDivtwo.innerHTML =text.value;
		del.innerHTML = '删除';
		// 插入新元素
		h1.appendChild(newDivone);
		h1.appendChild(newDivtwo);
		h1.appendChild(del);
		//  给元素设置新样式
		newDivone.setAttribute('class','div4');
		newDivtwo.setAttribute('class','div5');
		del.setAttribute('class','a');
		// 提交完之后
		oInput.value = null;
		text.value = null;
		del.onclick = function(){
			h1.removeChild(newDivone);
			h1.removeChild(newDivtwo);
			h1.removeChild(this);
		}
	}
		btn.onclick = function(){
			if(oInput.value == '' && text.value == ''){
				alert('标题内容不能为空');
			}else if(oInput.value != ''&& text.value == ''){
				alert('内容不能为空');
			}else if(oInput.value == '' && text.value != ''){
				alert('标题不能为空');
			}else{
				ran();
			}
		}
</script>
</html>